<div class="block brand-search block-subscribe">
    <div class="shopbybrand-title"><h1><?php echo $this->__('Brand Search'); ?></h1></div>
    <div class="brand-search-content" style="min-height: 3.5em;">
        <div id="brand_search_box" class="brand-sidebar">
            <input type="text" class="brandsearch form-control" id="brandsearch" autocorrect="off" autocomplete="off" placeholder="<?php echo $this->__('Search by name'); ?>">
            <ul id="searchbrand" class="searchbrand"></ul>
        </div>
    </div>
</div>
<style>
#brand_search_box {
    float: left !important;
    max-width: 370px!important;
    position: relative !important;
    margin-left: 0px !important;
    width: 100% !important;
}
.searchbrand {
    overflow-x: hidden !important;
    max-height: 275px !important;
    overflow-y: auto !important;
    margin-left: 0px !important;
    position: absolute !important;
    width: 100% !important;
    left: 0;
    
}

</style>
<script type="text/javascript" charset="utf-8">
    var searchWidth = 35;
    var brands = <?php echo json_encode($this->getSearchData()); ?>;
    var brandIndex = 0;
    $('brandsearch').observe('input',function(){
        $('searchbrand').innerHTML ='';
        var count = 0;
        brands.each(function(el){
            if(el.n.toLowerCase().search($('brandsearch').value.toLowerCase()) != -1){
                count++;
                $('searchbrand').insert('<li  onclick="redirect(\''+el.k+'\',\''+el.k+'\')">'+el.n+'</li>');
            }
        });
        $('searchbrand').show();
        brandIndex = 0;
        if(count){
            $$('#searchbrand li')[0].addClassName('selected');
        }
    });
    var click = $$('body').first().observe('click',function(event){
                if(Event.element(event).id=='brandsearch'||Event.element(event).id=='searchbrand'){
                    return;}
                else {
                    $('searchbrand').hide();
                    $('searchbrand').innerHTML = '';
                }
            });
            
    $('brandsearch').observe('keyup',function(event){
         $('searchbrand').show();
        if(event.keyCode==38||event.keyCode==40){
            if($F('brandsearch')==''&&!$$('#searchbrand li').length)
                brands.each(function(el){
                    $('searchbrand').insert('<li  onclick="redirect(\''+el.k+'\',\''+el.n+'\')">'+el.n+'</li>');
                });
            $$('#searchbrand li')[brandIndex].removeClassName('selected');
            getSelectedIndex(event.keyCode);
            $$('#searchbrand li')[brandIndex].addClassName('selected');
            searchScroll();
            $('brandsearch').value = $$('#searchbrand li.selected').first().textContent;
        }
        if(event.keyCode==13){
            $('brandsearch').value='';
            if($$('#searchbrand li.selected').first())
                $$('#searchbrand li.selected').first().click();
        }
    });
    function searchScroll(){
        if($('searchbrand').scrollTop > brandIndex*searchWidth)
            $('searchbrand').scrollTop = brandIndex*searchWidth;
        else if($('searchbrand').scrollTop + 8*searchWidth < brandIndex*searchWidth)
            $('searchbrand').scrollTop = brandIndex*searchWidth - 7*searchWidth;
    }
    
    function getSelectedIndex(keycode){
        var length = $$('#searchbrand li').length;
        if(keycode==38&&brandIndex==0)
            brandIndex = length-1;
        else if(keycode==40&&brandIndex==(length-1))
            brandIndex = 0;
        else if(keycode==38)
            brandIndex--;
        else if(keycode==40)
            brandIndex++;
    }
    function redirect(url_key,name){
        $('brandsearch').value = name;
        window.location.href = '<?php echo Mage::getBaseUrl();?>'+url_key;
    }
</script>